<template>
    <div id="survey">
        <router-link to="/centerPage/CenterRecipes">
            <h2 class="survey-title" v-if ="collectRecipes.length !== 0">收藏的菜谱
                <span>({{collectRecipes.length}})</span>
            </h2>
        </router-link>
        <div class="survey-list" v-if ="collectRecipes.length !== 0">
            <div class="sl-item" v-for="data in collectRecipes" :key="data.menuId">
                <router-link to="/centerPage/CenterRecipes">
                <img :src="data.menuSrc" alt="">
                <p>{{data.menuName}}</p>
                </router-link>
                <span class="el-icon-view"></span>
                <span>{{data.doh}}</span>
                <span class="el-icon-star-off"></span>
                <span>{{data.collection}}</span>
            </div>
        </div>
        <router-link to="/centerPage/CenterRecipes" v-if ="collectLists.length !== 0">
            <h2 class="survey-title">发布的菜谱
                <span>({{collectLists.length}})</span>
            </h2>
        </router-link>
        <div class="survey-list" v-if ="collectLists.length !== 0">
            <div class="sl-item" v-for="data in collectLists" :key="data.menuFatherId">
                <router-link to="/centerPage/CenterRecipes">
                <img src="https://cp1.douguo.com/upload/caiku/5/d/6/600_5dbe1650c5cb1ea0edfbb998de80a296.jpeg" alt="">
                <p>{{data.menuFatherName}}</p>
                </router-link>
                <span class="el-icon-view"></span>
                <span>1</span>
                <span class="el-icon-star-off"></span>
                <span>{{data.collection}}</span>
            </div>
        </div>
    </div>
</template>

<script>
import cookie from '../../../cookien'
export default {
  data () {
    return {
      list: [],
      current_page: 1,
      total: '100',
      loading: true,
      collectRecipes: '',
      collectLists: ''
    }
  },
  methods: {
    getCollectRecipes (key) {
      console.log(this.$route.params.userId)
      this.$axios({
        method: 'get',
        url: '/Menu/Visitor/findCollectionByUserId',
        params: {
          userId: 1,
          menuType: key,
          pageNow: 1,
          pageSize: 3
        },
        headers: {
          token: cookie.getToken()
        }
      }).then(data => {
        console.log(data.data)
        if (data.data.code === 200) {
          console.log(data.data.object)
          if (key === 0) {
            this.collectRecipes = data.data.object
          } else {
            this.collectLists = data.data.object
            console.log(this.collectLists)
          }
        //   this.userInfo = data.data.object
        }
      }).catch(error => {
        console.log(error)
      })
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    }
  },
  mounted () {
    this.getCollectRecipes(0)
    // this.getCollectRecipes(1)
  }
}
</script>

<style lang="less" scoped>
#survey{
    width: 100%;
    .survey-title{
        display: inline-block;
        width: auto;
        margin:34px 0 18px;font-size: 18px;line-height: 22px;font-weight: bold;
        color: #333;
        span{
            color: #999;font-weight:normal;
        }
    }
    .survey-list{
        display: grid;
        grid-template-columns: repeat(3,324px);
        place-content: space-around space-between;
        .sl-item{
            img{
                width: 100%;
                height: 182px;
                border-radius: 8px;
                object-fit: cover;
            }
            p{
                color: #333;
                font-size: 15px;height:35px;
                line-height: 35px;
                text-overflow: ellipsis;
                overflow: hidden;white-space: nowrap;
                &:hover {
                    cursor: pointer;
                    color: #FFB31A;
                }
            }
            span{
                font-size: 14px;
                height:14px;
                line-height: 14px;
                margin:0 4px;
                display: inline-block;
            }
            .el-icon-view{
                transform:translateY(4px)
            }
        }
    }
}
</style>
